<template>
    <div class="mainBox">
        <div class="title">自行批改</div>
        <div class="bodyBox">
            <div class="bodyLeft">
                <div
                    class="topicType"
                    v-for="(item, index) in datas"
                    :key="index"
                >
                    <div v-if="currentIndex == index">
                        <div class="titleTextRow">
                            <span class="numTetx">{{ index + 1 }}.</span>
                            <el-tag effect="plain" size="mini">{{
                                item.question_type_name
                            }}</el-tag>
                            <div
                                class="titleText3"
                                v-html="
                                    item.question_title +
                                        (is_exam_type == 2
                                            ? '(' +
                                              item.answerData.score +
                                              '分)'
                                            : '')
                                "
                            ></div>
                        </div>
                    </div>
                    <div
                        v-if="
                            datas[currentIndex].is_sub_question == 1 &&
                                currentIndex == index
                        "
                    >
                        <div class="analysis1">
                            <div>
                                <div class="answer">
                                    <div class="checkAnswer">
                                        <div style="display:flex;width:100%">
                                            你的答案:
                                            <div
                                                v-if="
                                                    (item.answerData
                                                        .user_text_answer ==
                                                        '' &&
                                                        item.answerData
                                                            .answer_img_list ==
                                                            null) ||
                                                        item.answerData == null
                                                "
                                            >
                                                没答题
                                            </div>
                                            <div
                                                v-if="
                                                    item.answerData
                                                        .user_text_answer
                                                "
                                                style="width:80%"
                                            >
                                                <div
                                                    v-if="
                                                        item.question_typeid ==
                                                            11
                                                    "
                                                >
                                                    <el-image
                                                        :src="
                                                            'data:image/png;base64,' +
                                                                item.answerData
                                                                    .user_text_answer[0]
                                                        "
                                                        :style="{
                                                            background:
                                                                'url(' +
                                                                item
                                                                    .question_photo[0] +
                                                                ') no-repeat'
                                                        }"
                                                    ></el-image>
                                                    <!-- <image class="right_img" :src="dataobj.answerData.user_text_answer" style="margin: 0; padding: 0; height: 200upx;"></image> -->
                                                </div>
                                                <div v-else>
                                                    {{
                                                        item.answerData
                                                            .user_text_answer ==
                                                        ""
                                                            ? "没答题"
                                                            : item.answerData
                                                                  .user_text_answer
                                                    }}
                                                </div>
                                            </div>
                                            <div
                                                style="display:flex;width:80%"
                                                v-if="
                                                    item.answerData
                                                        .answer_img_list &&
                                                        item.answerData
                                                            .answer_img_list
                                                            .length > 0
                                                "
                                            >
                                                <div
                                                    v-for="(imgitem,
                                                    imgindex) in item.answerData
                                                        .answer_img_list"
                                                    :key="imgindex"
                                                    class="answerImg"
                                                    @click="bosst(imgitem)"
                                                    :style="{
                                                        backgroundImage:
                                                            'url(' +
                                                            imgitem +
                                                            ')'
                                                    }"
                                                ></div>
                                                <el-dialog
                                                    :visible.sync="
                                                        dialogVisible
                                                    "
                                                    :append-to-body="true"
                                                >
                                                    <img
                                                        width="100%"
                                                        :src="preImg"
                                                        alt
                                                    />
                                                </el-dialog>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="yourAnswer">
                                        正确答案：
                                        <div v-html="item.answer_text"></div>
                                    </div>
                                    <div
                                        v-if="
                                            is_exam_type == 1 &&
                                                item.answerData.correct_state !=
                                                    2
                                        "
                                    >
                                        作业批改
                                    </div>
                                    <div
                                        class="answerScore"
                                        v-if="
                                            is_exam_type == 2 &&
                                                item.answerData.correct_state !=
                                                    2
                                        "
                                    >
                                        <el-input
                                            v-model="score"
                                            style="width:100px"
                                            placeholder="输入分数"
                                        ></el-input>
                                        <div
                                            class="submitScore"
                                            @click="
                                                correctexam(item.question_id, 1)
                                            "
                                        >
                                            评分
                                        </div>
                                    </div>
                                    <div
                                        class="answerScore"
                                        v-if="
                                            item.answerData.correct_state ==
                                                2 &&
                                                item.answerData
                                                    .user_text_answer != ''
                                        "
                                    >
                                        <div class="submitScore">修改批改</div>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            <div class="analysisRow">
                                <div class="analysisTitle">答案解析</div>
                            </div>
                            <div
                                class="answerBody"
                                v-html="item.question_analysis"
                            ></div>
                            <el-divider></el-divider>
                            <div class="analysisRow">
                                <div class="analysisTitle">知识点</div>
                            </div>
                            <div
                                class="answerBody"
                                v-if="item.answerData.section_data.length != 0"
                            >
                                {{ item.answerData.section_data.gradeName
                                }}{{ item.answerData.section_data.subject_name
                                }}{{
                                    item.answerData.section_data.f_section_name
                                }}{{
                                    item.answerData.section_data.section_name
                                }}
                            </div>
                            <div
                                class="answerBody"
                                v-if="item.answerData.section_data.length == 0"
                            >
                                无
                            </div>
                            <!-- <el-divider></el-divider> -->
                        </div>
                    </div>
                </div>
                <!-- 子试题 -->
                <div v-if="dataobj.is_sub_question == 2">
                    <div
                        v-for="(item4, index4) in dataobj.question_sub_lists"
                        :key="'index4' + index4"
                    >
                        <div v-if="childCurrentIndex == index4">
                            <div class="titleTextRow1">
                                <span class="numTetx">{{ index4 + 1 }}.</span>
                                <el-tag effect="plain" size="mini">{{
                                    item4.question_type_name
                                }}</el-tag>
                                <div
                                    class="titleText"
                                    v-html="item4.question_title"
                                ></div>
                                <div class="titleError1">
                                    <div
                                        :class="[
                                            childCurrentIndex == index5
                                                ? 'childCurrent1'
                                                : 'childCurrent'
                                        ]"
                                        @click="childCurrent(index5)"
                                        v-for="(item5, index5) in item3
                                            .question_sub_lists.length"
                                        :key="index5"
                                    >
                                        {{ item5 }}
                                    </div>
                                </div>
                            </div>
                            <div
                                v-if="
                                    dataobj.is_sub_question == 2 &&
                                        childCurrentIndex == index4
                                "
                            >
                                <div class="analysis1">
                                    <div>
                                        <div class="answer">
                                            <div class="checkAnswer">
                                                <div
                                                    style="display:flex;width:100%"
                                                >
                                                    你的答案:
                                                    <div
                                                        v-if="
                                                            (dataobj.subList[
                                                                childCurrentIndex
                                                            ].answerData
                                                                .user_text_answer ==
                                                                '' &&
                                                                dataobj.subList[
                                                                    childCurrentIndex
                                                                ].answerData
                                                                    .answer_img_list ==
                                                                    null) ||
                                                                dataobj.subList[
                                                                    childCurrentIndex
                                                                ].answerData ==
                                                                    null
                                                        "
                                                    >
                                                        没答题
                                                    </div>
                                                    <div
                                                        v-if="
                                                            dataobj.subList[
                                                                childCurrentIndex
                                                            ].answerData
                                                                .user_text_answer
                                                        "
                                                        style="width:80%"
                                                    >
                                                        <div
                                                            v-if="
                                                                dataobj.subList[
                                                                    childCurrentIndex
                                                                ]
                                                                    .question_typeid ==
                                                                    11
                                                            "
                                                        >
                                                            <image
                                                                :src="
                                                                    'data:image/png;base64,' +
                                                                        dataobj
                                                                            .subList[
                                                                            childCurrentIndex
                                                                        ]
                                                                            .answerData
                                                                            .user_text_answer[0]
                                                                "
                                                                :style="{
                                                                    background:
                                                                        'url(' +
                                                                        item
                                                                            .question_photo[0] +
                                                                        ') no-repeat'
                                                                }"
                                                            ></image>
                                                            <!-- <image class="right_img" :src="dataobj.answerData.user_text_answer" style="margin: 0; padding: 0; height: 200upx;"></image> -->
                                                        </div>
                                                        <div v-else>
                                                            {{
                                                                dataobj.subList[
                                                                    childCurrentIndex
                                                                ].answerData
                                                                    .user_text_answer ==
                                                                ""
                                                                    ? "没答题"
                                                                    : dataobj
                                                                          .subList[
                                                                          childCurrentIndex
                                                                      ]
                                                                          .answerData
                                                                          .user_text_answer
                                                            }}
                                                        </div>
                                                    </div>
                                                    <div
                                                        style="display:flex;width:80%"
                                                        v-if="
                                                            dataobj.subList[
                                                                childCurrentIndex
                                                            ].answerData
                                                                .answer_img_list &&
                                                                dataobj.subList[
                                                                    childCurrentIndex
                                                                ].answerData
                                                                    .answer_img_list
                                                                    .length > 0
                                                        "
                                                    >
                                                        <div
                                                            v-for="(imgitem,
                                                            imgindex) in dataobj
                                                                .subList[
                                                                childCurrentIndex
                                                            ].answerData
                                                                .answer_img_list"
                                                            :key="imgindex"
                                                            class="answerImg"
                                                            @click="
                                                                bosst(imgitem)
                                                            "
                                                            :style="{
                                                                backgroundImage:
                                                                    'url(' +
                                                                    imgitem +
                                                                    ')'
                                                            }"
                                                        ></div>
                                                        <el-dialog
                                                            :visible.sync="
                                                                dialogVisible
                                                            "
                                                            :append-to-body="
                                                                true
                                                            "
                                                        >
                                                            <img
                                                                width="100%"
                                                                :src="preImg"
                                                                alt
                                                            />
                                                        </el-dialog>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="yourAnswer">
                                                正确答案：
                                                <div
                                                    v-html="
                                                        dataobj.subList[
                                                            childCurrentIndex
                                                        ].answer_text
                                                    "
                                                ></div>
                                            </div>
                                            <div
                                                v-if="
                                                    is_exam_type == 1 &&
                                                        dataobj.subList[
                                                            childCurrentIndex
                                                        ].answerData
                                                            .correct_state != 2
                                                "
                                            >
                                                作业批改
                                            </div>
                                            <div
                                                class="answerScore"
                                                v-if="
                                                    is_exam_type == 2 &&
                                                        dataobj.subList[
                                                            childCurrentIndex
                                                        ].answerData
                                                            .correct_state != 2
                                                "
                                            >
                                                <el-input
                                                    v-model="score"
                                                    style="width:100px"
                                                    placeholder="输入分数"
                                                ></el-input>
                                                <div
                                                    class="submitScore"
                                                    @click="
                                                        correctexam(
                                                            dataobj.question_id,
                                                            2,
                                                            dataobj.subList[
                                                                childCurrentIndex
                                                            ].question_id
                                                        )
                                                    "
                                                >
                                                    评分
                                                </div>
                                            </div>
                                            <div
                                                class="answerScore"
                                                v-if="
                                                    dataobj.subList[
                                                        childCurrentIndex
                                                    ].answerData
                                                        .correct_state == 2 &&
                                                        dataobj.subList[
                                                            childCurrentIndex
                                                        ].answerData
                                                            .user_text_answer !=
                                                            ''
                                                "
                                            >
                                                <div class="submitScore">
                                                    修改批改
                                                </div>
                                            </div>
                                        </div>
                                        <el-divider></el-divider>
                                    </div>
                                    <div class="analysisRow">
                                        <div class="analysisTitle">
                                            答案解析
                                        </div>
                                    </div>
                                    <div
                                        class="answerBody"
                                        v-html="
                                            dataobj.subList[childCurrentIndex]
                                                .question_analysis
                                        "
                                    ></div>
                                    <el-divider></el-divider>
                                    <div class="analysisRow">
                                        <div class="analysisTitle">知识点</div>
                                    </div>
                                    <div
                                        class="answerBody"
                                        v-if="
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .length != 0
                                        "
                                    >
                                        {{
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .gradeName
                                        }}{{
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .subject_name
                                        }}{{
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .f_section_name
                                        }}{{
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .section_name
                                        }}
                                    </div>
                                    <div
                                        class="answerBody"
                                        v-if="
                                            dataobj.subList[childCurrentIndex]
                                                .answerData.section_data
                                                .length == 0
                                        "
                                    >
                                        无
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footerBar">
                    <div class="bottomBtu" @click="finish">
                        完成
                    </div>
                    <div class="footerText">智助教育提供技术支持</div>
                </div>
            </div>
            <div class="bodyRight">
                <div class="rightBox">
                    <div class="topBox">
                        <div class="answerNum">
                            总题数：（{{ currentIndex + 1 }}/{{ length }})
                        </div>
                        <el-divider></el-divider>
                        <div class="optionBox">
                            <div
                                v-for="(i, index) in length"
                                class="option"
                                :key="index"
                                :class="[
                                    currentIndex == index ? 'isNowStateBox' : ''
                                ]"
                                @click="current(index)"
                            >
                                {{ i }}
                            </div>
                        </div>
                    </div>
                    <div class="right-bottom">
                        <div class="Tips">
                            <div class="neverBox"></div>
                            <div>未选中项</div>
                            <div class="nowBox"></div>
                            <div>选中项</div>
                            <!-- <div class="isBoxEd"></div>
                            <div>已达项</div> -->
                        </div>
                        <div class="moreBtn">
                            <i class="el-icon-s-tools"></i>更多设置
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { correctExamlist } from "@/api/test/exam/index";
import { correctHomeworklist, correctHomework } from "@/api/test/work/index";
import { latex_reques, latex_answer } from "@/utils/latex";
import {
    getQuestionList,
    getQuestionSubList
} from "@/api/testQuestions/question";
import util from "@/utils/utilsTools";
export default {
    components: {},
    props: {},
    data() {
        return {
            type: "",
            is_exam_type: 1,
            class_log_id: "",
            scoreList: [], //作业答案列表
            navList: [], //作业试题
            subquestion: [], //子题列表
            datas: [],
            dataobj: {},
            score: "",
            testInfo: [],
            length: 0,
            preImg: "",
            dialogVisible: false, //大图预览
            selectindex: 0,
            currentIndex: 0, //当前题目索引
            childCurrentIndex: 0 //子试题索引
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
        this.class_log_id = this.$route.query.class_log_id;
        this.type = Number(this.$route.query.type);
        if (this.type == 0) {
            this.is_exam_type = 2;
        }
        this.$message.error("选择题和判断题不需要自评");
        this.getlist();
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中
    },
    methods: {
        /* 获取试题列表id */
        getlist() {
            var data = {
                class_log_id: this.class_log_id
            };
            if (this.is_exam_type == 1) {
                this.getCorrectHomeworklist(data);
            } else if (this.is_exam_type == 2) {
                this.getCorrectExamlist(data);
            }
        },
        getCorrectHomeworklist(data) {
            correctHomeworklist(data).then(res => {
                if (res.code == 200) {
                    this.scoreList = res.data.data;
                    var questionstr = res.data.question_id;
                    // 获取作业试题
                    this.getTest(questionstr, this.scoreList.length);
                }
            });
        },
        getCorrectExamlist(data) {
            correctExamlist(data).then(res => {
                if (res.code == 200) {
                    this.scoreList = res.data.data;
                    var questionstr = res.data.question_id;
                    // 获取作业试题
                    this.getTest(questionstr, this.scoreList.length);
                }
            });
        },
        getTest(question_id, length) {
            var testData = {
                question_id: question_id,
                is_get_answer: 2,
                page: 1,
                pagesize: length
            };
            getQuestionList(testData).then(res => {
                if (res.code == 200) {
                    var result = res.data.data;
                    for (var i = 0; i < result.length; i++) {
                        result[i].answerData = {
                            answer_img_list: []
                        };
                    }
                    this.navList = result;
                    var f_question_string = res.data.f_question_string;
                    // 获取子题
                    if (f_question_string != "") {
                        this.getSubquestion(f_question_string);
                    } else {
                        this.setData();
                    }
                }
            });
        },
        getSubquestion(parent_question_id) {
            getQuestionSubList({
                parent_question_id: parent_question_id,
                is_get_answer: 2,
                is_out_html: 2,
                allowable_tags: "<img>"
            }).then(res => {
                if (res.code == 200) {
                    var result = res.data;
                    for (var i = 0; i < result.length; i++) {
                        result[i].answerData = {
                            answer_img_list: []
                        };
                    }
                    this.subquestion = result;
                    this.setData();
                }
            });
        },
        setData() {
            latex_reques(this.navList, "question_title"); //解析 试题标题 latex 公式转换
            latex_reques(this.navList, "question_analysis"); //解析 试题解析 latex 公式转换
            latex_answer(this.navList, "answer_list"); //解析答案选项 latex 公式转换
            var dataarr = [];
            this.navList.forEach(item => {
                var is_bg = false;
                //将作业答案放到每条题上
                this.scoreList.forEach(sitem => {
                    if (item.question_id == sitem.question_id) {
                        if (sitem.section_data.grade) {
                            sitem.section_data.gradeName = util.getgradeName(
                                sitem.section_data.grade
                            );
                        }
                        item.answerData = sitem;
                    }
                });
                //存在子题
                if (item.is_sub_question == 2) {
                    //循环将子题列表放到父题sub_question中
                    this.subquestion.forEach(zitem => {
                        if (item.question_id == zitem.f_question_id) {
                            latex_reques(
                                zitem.question_sub_lists,
                                "question_title"
                            ); //解析 试题标题 latex 公式转换
                            latex_reques(
                                zitem.question_sub_lists,
                                "question_analysis"
                            ); //解析 试题解析 latex 公式转换
                            latex_answer(
                                zitem.question_sub_lists,
                                "answer_list"
                            ); //解析答案选项 latex 公式转换

                            // 循环子题列表和答案列表配置
                            zitem.question_sub_lists.forEach(qitem => {
                                item.answerData.sub_question_ansewr.forEach(
                                    aitem => {
                                        if (
                                            qitem.question_id ==
                                            aitem.question_id
                                        ) {
                                            if (aitem.user_text_answer) {
                                                aitem.user_text_answer = aitem.user_text_answer.join(
                                                    ","
                                                );
                                            }
                                            qitem.answerData = aitem;
                                        }
                                    }
                                );
                                let answer_text = "";
                                qitem.answer_list.forEach(answeritem => {
                                    if (answer_text == "") {
                                        answer_text = answeritem.answer;
                                    } else {
                                        answer_text =
                                            answer_text +
                                            "," +
                                            answeritem.answer;
                                    }
                                    if (
                                        answeritem.is_bd == 1 ||
                                        zitem.is_systm_judge == 2 ||
                                        answeritem.is_systm_judge == 2 ||
                                        qitem.is_systm_judge == 2
                                    ) {
                                        is_bg = true;
                                    }
                                });
                                qitem.answer_text = answer_text;
                            });
                            item.sub_question = zitem.question_sub_lists;
                        }
                    });
                } else {
                    let answer_text = "";
                    item.answer_list.forEach(answeritem => {
                        if (answer_text == "") {
                            answer_text = answeritem.answer;
                        } else {
                            answer_text = answer_text + "," + answeritem.answer;
                        }
                        if (
                            answeritem.is_bd == 1 ||
                            item.is_systm_judge == 2 ||
                            answeritem.is_systm_judge == 2
                        ) {
                            is_bg = true;
                        }
                    });
                    item.answer_text = answer_text;
                }

                if (is_bg) {
                    dataarr.push(item);
                }
            });
            this.datas = dataarr;
            this.dataobj = this.datas[this.currentIndex];

            this.length = this.datas.length;
            console.log("数据1", this.datas);
            console.log("数据2", this.dataobj);
            this.$forceUpdate();
        },
        // 大图预览
        bosst(url) {
            this.preImg = url;
            this.dialogVisible = true;
        },
        /* 批改测验 */
        correctexam(question_id, score, sub_question_id) {
            var scoreData = {
                class_log_id: this.class_log_id,
                question_id: question_id,
                fraction: this.score
            };
            if (sub_question_id) {
                scoreData.sub_question_id = sub_question_id;
            }
            console.log("参数", scoreData);
            correctHomework(scoreData).then(res => {
                console.log("res", res);
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        customClass: "customClass",
                        message: "批改成功"
                    });

                    if (sub_question_id) {
                        this.datas[this.currentIndex].sub_question[
                            this.childCurrentIndex
                        ].answerData.correct_state = 2;
                        var is_correct = true;
                        this.datas[this.currentIndex].sub_question.forEach(
                            item => {
                                if (item.answerData.correct_state == 1) {
                                    is_correct = false;
                                    return;
                                }
                            }
                        );
                        // 切换子试题
                        if (
                            this.childCurrentIndex <
                            this.datas[this.currentIndex].subList.length - 1
                        ) {
                            this.childCurrentIndex = this.childCurrentIndex + 1;
                        }
                        // 判断是否为子试题最后一题
                        if (is_correct) {
                            this.datas[
                                this.currentIndex
                            ].answerData.correct_state = 2;

                            if (this.currentIndex < this.datas.length - 1) {
                                this.currentIndex = this.currentIndex + 1;
                                this.dataobj = this.datas[this.currentIndex];
                            }
                        }
                        this.score = "";
                    } else {
                        this.datas[
                            this.currentIndex
                        ].answerData.correct_state = 2;
                        this.score = "";
                        if (this.currentIndex < this.datas.length - 1) {
                            this.currentIndex = this.selectindex + 1;
                            this.dataobj = this.datas[this.currentIndex];
                        }
                    }
                } else {
                    this.$message.error("批改失败");
                }
                this.$forceUpdate();
            });
        },
        // 切换试题
        current(index) {
            this.currentIndex = index;
            this.childCurrentIndex = 0;
        },
        // 切换子试题
        childCurrent(index) {
            this.childCurrentIndex = index;
        },
        finish() {
            var isgoto = true;
            var itemkey = "";
            try {
                this.datas.forEach((item, key) => {
                    if (item.answerData.correct_state == 1) {
                        isgoto = false;
                        itemkey = key;
                        throw new Error("return");
                    }
                });
            } catch (e) {
                this.$message.error("第" + (itemkey + 1) + "题没批改");
            }
            if (isgoto) {
                this.$router.push({
                    path: "/test/testReport/index",
                    query: {
                        class_log_id: this.class_log_id,
                        type: this.type
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../synchronization/startPracticing/answerCard/common.scss";
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.titleError {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #cccccc;
    margin-left: 15px;
    .correct {
        color: #00d5a2;
    }
    .el-rate {
        margin-left: 15px;
    }
}
.titleError1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;
    .childCurrent {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #9ea4b0;
        margin-left: 10px;
    }
    .childCurrent1 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #3980ed;
        margin-left: 10px;
    }
    .childCurrent2 {
        background-color: #18db60;
        color: #ffffff;
    }
    .childCurrent3 {
        box-shadow: 0 0 8px #3980ed;
    }
    .el-rate {
        margin-left: 15px;
    }
}
.input-area {
    margin-top: 20px;
    .serial {
        margin-bottom: 5px;
    }
}

.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.bodyBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.bodyLeft {
    width: 781px;
    min-height: 632px;
    background: #ffffff;
    border-radius: 8px;
    padding: 23px 30px;
    padding-bottom: 100px;
    box-sizing: border-box;
    flex-grow: 2;
    margin-right: 25px;
    position: relative;
    .el-tag--plain {
        color: #018854;
        border-color: #018854;
    }
}
.numTetx {
    font-size: 16px;
    font-weight: 500;
    color: #018854;
}
.numTitle1 {
    font-size: 22px;
    color: #2d3440;
    margin-right: 5px;
}
.pText {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2d3440;
}
.uploadNote {
    font-size: 16px;
    font-weight: 400;
    color: #2d3440;
    margin-top: 30px;
}
.uploadBox {
    width: 104px;
    height: 104px;
    background: #f5fcff;
    border: 1px solid #ebeff5;
    border-radius: 2px;
    margin: 20px 0 60px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6d7785;
    cursor: pointer;
}
.titleText {
    font-size: 16px;
    font-weight: 600;
    color: #2d3440;
    margin-left: 8px;
}
.fraction {
    font-size: 16px;
    color: #9ea4b0;
}
.selectBox {
    margin-top: 32px;
    width: 100%;
    .el-radio__input {
        &.is-checked {
            .el-radio__inner {
                border-color: #18db60;
                background-color: #18db60;
            }
            & + .el-radio__label {
                color: #18db60;
            }
        }
    }
}
.selectBox1 {
    margin: 32px 0px;
    width: 100%;
    display: flex;
    align-items: center;
}
.selectItemBox {
    width: 100%;
    border: 1px solid #dadfe6;
    border-radius: 8px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    &:hover {
        background-color: #f9f9f9;
    }
}
.isSelectItemBox {
    border: 1px solid #18db60;
}
.footerBar {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 10px;
}
.bottomBtu {
    width: 440px;
    height: 40px;
    background: #018854;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    cursor: pointer;
}
.btnGround {
    width: 510px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.bottomBtu1 {
    width: 251px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border: 1px solid #3980ed;
    color: #3980ed;
    cursor: pointer;
}
.bottomBtu2 {
    width: 251px;
    height: 40px;
    background: #018854;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}
.footerText {
    font-size: 12px;
    color: #9ea4b0;
    margin-top: 8px;
}
.bodyRight {
    width: 379px;
    min-width: 379px;
    flex-grow: 0;
    .rightBox {
        background-color: #ffffff;
        border-radius: 8px;
        height: 630px;
        position: relative;
    }
    .topBox {
        padding: 24px;
        box-sizing: border-box;
    }
}
.countDown {
    font-size: 44px;
    font-weight: bold;
    line-height: 20px;
    color: #ffa442;
    text-align: center;
}
.subtimeText {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    color: #6d7785;
    text-align: center;
}
.answerNum {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 400;
    color: #9ea4b0;
    text-align: center;
}
.optionBox {
    display: flex;
    flex-wrap: wrap;
}
.option {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9ea4b0;
    opacity: 1;
    border-radius: 2px;
    cursor: pointer;
    margin: 10px 12px;
    &:hover {
        border-color: #018854;
    }
}
.Tips {
    width: 379px;
    height: 16px;
    line-height: 16px;
    display: flex;
    font-size: 12px;
    color: #9ea4b0;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    div {
        margin: 0 5px;
    }
}
.neverBox {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 2px;
}
.nowBox {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #3980ed;
    border-radius: 2px;
}
.isBoxEd {
    width: 16px;
    height: 16px;
    background: #18db60;
    border-radius: 2px;
}
.moreBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #ebeff5;
    opacity: 1;
    border-radius: 0px 0px 8px 8px;
    font-size: 14px;
    color: #6d7785;
    cursor: pointer;
}
/* 选择状态 */
.isNowStateBox {
    border-color: #3980ed;
}
.isEDStateBox {
    background-color: #18db60;
    color: #ffffff;
}
.isEDStateBox1 {
    box-shadow: 0 0 8px #3980ed;
}
.right-bottom {
    position: absolute;
    bottom: 0px;
}

// 单选题
.radioAnswer {
    margin-top: 30px;
}
.selectItemBox {
    width: 100%;
    border: 1px solid #dadfe6;
    border-radius: 8px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;

    &:hover {
        background-color: #f9f9f9;
    }
}

.isSelectItemBox {
    border: 1px solid #18db60;
}
.selectItemBox-item {
    display: flex;
    align-items: center;
}
.answerImg {
    width: 50px;
    height: 50px;
    background: no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
}
.answerScore {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}
.submitScore {
    color: white;
    background: #018854;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}
</style>
